<!--
 * @Author: zhangduo 445629906@qq.com
 * @Date: 2023-10-12 19:16:58
 * @LastEditors: 曹家睿 17799623735@163.com
 * @LastEditTime: 2024-04-02 13:23:08
 * @FilePath: \mdbj-ui\src\views\onemap\index.vue
 * @Description: 园林绿地一张图
 * 
 * Copyright (c) 2023 by zhangduo, All Rights Reserved. 
-->

<template>
  <div id="onemap" class="app-container">
    <el-dialog
      title="全屏显示"
      :visible.sync="dialogVisible"
      :fullscreen="true"
      :style="{ color: theme }"
      center
    >
      <div id="main1" class="refchart" ref="fullChart" />
    </el-dialog>
    <el-row style="height: 100%">
      <el-col :span="6" :offset="0" class="leftPanel" v-if="true">
        <el-row :gutter="20" class="topleftPanel">
          <top-left
            ref="topLeft"
            :queryParams="queryParams"
            :whereClause="whereClause"
            :queryGeometry="queryGeometry"
          ></top-left>
        </el-row>
        <el-row :gutter="20" class="bottomleftPanel">
          <bottom-left
            ref="bottomLeft"
            :queryParams="queryParams"
            :whereClause="whereClause"
            :queryGeometry="queryGeometry"
          ></bottom-left>
        </el-row>
      </el-col>
      <el-col :span="12" :offset="0" class="centerPanel">
        <center-map
          @xzqhChanged="xzqhChanged"
          @extentChange="extentChanged"
          @clear="cleared"
        ></center-map>
      </el-col>
      <el-col :span="6" :offset="0" class="rightPanel" v-if="true">
        <el-row :gutter="20" class="toprightPanel">
          <top-right
            ref="topRight"
            :queryParams="queryParams"
            :whereClause="whereClause"
            :queryGeometry="queryGeometry"
          ></top-right>
        </el-row>
        <el-row :gutter="20" class="bottomrightPanel">
          <bottom-right
            ref="bottomRight"
            :queryParams="queryParams"
            :whereClause="whereClause"
            :selectXzqh="selectXzqh"
          ></bottom-right></el-row
      ></el-col>
    </el-row>
  </div>
</template>

<script>
import mapContainer from "../../components/Map/mapContainer";
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
import topLeft from "./topLeft";
import bottomLeft from "./bottomLeft";
import topRight from "./topRight";
import bottomRight from "./bottomRight";
import centerMap from "./centerMap";
import { arcgisToGeoJSON } from "@terraformer/arcgis";
import { geojsonToWKT } from "@terraformer/wkt";

export default {
  components: {
    mapContainer,
    topLeft,
    bottomLeft,
    topRight,
    bottomRight,
    centerMap,
  },
  data() {
    return {
      mapview: undefined,
      where: undefined,
      whereClause: "1=1",
      queryGeometry: "",
      selectXzqh: "",
      // 查询参数
      queryParams: {
        objname: undefined,
        objcode: undefined,
        type: undefined,
        type_m: undefined,
        type_s: undefined,
        suosjd: undefined,
        suossq: undefined,
        geometry: null,
      },
      chartDialog: false,
      dialogVisible: false,
    };
  },

  mounted() {
    console.log("index mounted");
  },
  methods: {
    // 行政区划选择事件
    xzqhChanged(value) {
      console.log(value);
      let _self = this;
      // 清空上一次的选择内容
      _self.queryParams.suosjd = null;
      _self.queryParams.suossq = null;
      // console.log(value);
      if (value.length == 1) {
        _self.queryParams.suosjd = value[0];
        _self.selectXzqh = value[0];
      } else {
        _self.queryParams.suossq = value[1];
        _self.selectXzqh = value[1];
      }
      _self.whereClause = _self.getWhereClause();
      // 使用 $nextTick() 解决Vue父组件修改了通过 props传递给子组件的数据，子组件没有及时更新问题https://code84.com/86880.html
      _self.$nextTick(() => {
        // _self.$refs.topLeft.getData();
        // _self.$refs.bottomLeft.getData();
        // _self.$refs.topRight.getData();
        // _self.$refs.bottomRight.getPerGreenArea();
        // _self.$refs.bottomRight.getGreenRate();
      });
    },
    // 获取绘制的查询空间范围
    extentChanged(value) {
      console.log(value);
      let _self = this;
      // 需要把arcgis json格式几何坐标转成wkt格式，方便后端查询
      // _self.queryGeometry = JSON.stringify(value);
      _self.queryParams.geometry = geojsonToWKT(
        arcgisToGeoJSON(value.toJSON())
      );
      _self.$nextTick(() => {
        _self.$refs.topLeft.getData();
        _self.$refs.bottomLeft.getData();
        _self.$refs.topRight.getData();
      });
    },
    // 获取查询条件
    getWhereClause() {
      let _self = this;
      //   queryParams
      let whereClause = "1=1";
      if (_self.queryParams.objname)
        whereClause +=
          " and objname like '%" + _self.queryParams.objname + "%'";
      if (_self.queryParams.objcode)
        whereClause +=
          " and objcode like '%" + _self.queryParams.objcode + "%'";
      if (_self.queryParams.suosjd)
        whereClause += " and suosjd like '%" + _self.queryParams.suosjd + "%'";
      if (_self.queryParams.suossq)
        whereClause += " and suossq like '%" + _self.queryParams.suossq + "%'";
      if (_self.queryParams.type)
        whereClause += " and type like '%" + _self.queryParams.type + "%'";
      if (_self.queryParams.type_m)
        whereClause += " and type_m like '%" + _self.queryParams.type_m + "%'";
      if (_self.queryParams.type_s)
        whereClause += " and type_s like '%" + _self.queryParams.type_s + "%'";
      if (_self.queryParams.treenum)
        whereClause +=
          " and treenum like '%" + _self.queryParams.treenum + "%'";
      return whereClause;
    },
    // 清空重置
    cleared() {
      let _self = this;
      // 清空上一次的选择内容
      _self.whereClause = "1=1";
      _self.queryGeometry = null;
      _self.selectXzqh = "";
      _self.queryParams.suosjd = null;
      _self.queryParams.suossq = null;
      _self.queryParams.geometry = null;
      _self.$nextTick(() => {
        // _self.$refs.topLeft.getData();
        // _self.$refs.bottomLeft.getData();
        // _self.$refs.topRight.getData();
        // _self.$refs.bottomRight.getPerGreenArea();
        // _self.$refs.bottomRight.getGreenRate();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container,
.map-container {
  padding: 0;
  margin: 0;
  width: 100%;
  height: calc(100vh - 60px);
}

.echart-panel {
  // width: 300px;
  //   background-color: #536174;
  background: #ffffff;
  box-shadow: 0px 0px 14px 1px rgba(0, 0, 0, 0.09);
  opacity: 1;
  border-radius: 5px;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.echart-dom {
  //height: 32%;
  margin-bottom: 10px;
  height: 100%;
  width: 100%;
}

.echart-title {
  padding-bottom: 2px;
  //   padding-top: 2px;
  //margin-left: -6px;
  width: 100%;
  //   padding-left: 4px;
  height: 38px;
  font-size: 16px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  line-height: 24px;
  display: flex;
  align-content: center;
  align-items: center;
}

.titleborder {
  padding-left: 16px;
  width: inherit;
  height: 38px;
  /* background: -webkit-gradient(linear, left top, right top, from(#008cce), to(#1b678b)); */
  background: linear-gradient(90deg, #00c5ce 0%, #13ce66 100%);
  opacity: 1;
  display: flex;
}

.divider {
  width: 4px;
  height: 18px;
  background: #ffffff;
  opacity: 1;
  margin-top: 9px;
  margin-left: 8px;
}

.tltle {
  height: 24px;
  font-size: 16px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  margin-top: 6px;
  margin-left: 8px;
}

.leftPanel {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  height: 100%;

  //background-color: skyblue;
  .topleftPanel {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    height: 50%;
  }

  .bottomleftPanel {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    height: 50%;
    //background-color: burlywood;
  }
}

.centerPanel {
  height: 100%;
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.rightPanel {
  height: 100%;
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;

  //background-color: plum;
  .toprightPanel {
    height: 50%;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    //background-color: forestgreen;
  }

  .bottomrightPanel {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    height: 50%;
    //background-color: gray;
  }
}
.refchart {
  width: 100%;
  height: 100%;
  position: absolute;
  padding: 5px !important;
  overflow-y: hidden !important;
  overflow-x: hidden !important;
  place-items: center;
  background-color: #00c5ce;
}
//@import url("./tools.css");
</style>
